<template>
  <div id="modal" class="modal">
    <div class="modal-content">
      <span class="close" @click="closeModal">&times;</span>

      <div class="modal_contianer">
        <div class="title">
          <h1>编辑信息</h1>
        </div>
        <div class="text">
          <span>唯一标识：</span>
          <div class="demo">
            <el-input
                class="custom-input"
                placeholder="请输入内容"
                v-model="courseData.openid"
                clearable>
            </el-input>
          </div>
        </div>
        <div class="text">
          <span>课程名称：</span>
          <div class="demo">
            <el-input
                class="custom-input"
                placeholder="请输入内容"
                v-model="courseData.course"
                clearable>
            </el-input>
          </div>
        </div>
        <div class="text">
          <span>任课教师：</span>
          <div class="demo">
            <el-input
                class="custom-input"
                placeholder="请输入内容"
                v-model="courseData.teacher"
                clearable>
            </el-input>
          </div>
        </div>
        <div class="text">
          <span>周次信息：</span>
          <div class="demo">
            <el-input
                class="custom-input"
                placeholder="请输入内容"
                v-model="courseData.weeks"
                clearable>
            </el-input>
          </div>
        </div>
        <div class="text">
          <span>周几上课：</span>
          <div class="demo">
            <el-input
                class="custom-input"
                placeholder="请输入内容"
                v-model="courseData.day_of_week"
                clearable>
            </el-input>
          </div>
        </div>
        <div class="text">
          <span>课程信息：</span>
          <div class="demo">
            <el-input
                class="custom-input"
                placeholder="请输入内容"
                v-model="courseData.weekend"
                clearable>
            </el-input>
          </div>
        </div>
        <div class="text">
          <span>上课节次：</span>
          <div class="demo">
            <el-input
                class="custom-input"
                placeholder="请输入内容"
                v-model="courseData.time"
                clearable>
            </el-input>
          </div>
        </div>
        <div class="text">
          <span>课程地点：</span>
          <div class="demo">
            <el-input
                class="custom-input"
                placeholder="请输入内容"
                v-model="courseData.room"
                clearable>
            </el-input>
          </div>
        </div>
      </div>

      <div class="buttons">
        <el-button type="success" @click="saveCourseData">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "EditInfo",
  props:['value'],
  data(){
    return {
      isEdit:true,
      courseData:{
        openid:'',
        course:'',
        teacher:'',
        weeks:'',
        day_of_week:'',
        weekend:'',
        time:'',
        room:''
      }
    }
  },
  methods:{
    closeModal(){
      this.$emit('cancel'); // 触发取消事件
    },
    cancel() {
      this.$emit('cancel'); // 触发取消事件
    },
    saveCourseData(){
      console.log('Update',this.courseData)
      axios.post('/update/api/course', this.courseData)
          .then(res =>{
            // console.log(res.data)
            if (res.data.code === 0){
              alert('更新成功！')
              this.$emit('cancel'); // 触发取消事件
              // this.$router.go(0)
            } else {
              alert('更新失败')
              this.$emit('cancel'); // 触发取消事件
            }
          })
          .catch(err =>{
            alert(err)
          })
    }
  },
  mounted() {
    // console.log(this.value)
    axios.post(`/api/course/${this.value}`)
        .then(res => {
          // console.log(res.data.result);
          this.courseData = {
            ...res.data.result[0]
          }
          // console.log(this.courseData)
        })
        .catch(error => {
          console.error(error);
        });
  }
}
</script>

<style scoped>
.custom-input {
  width: 300px;
}
.demo{
  margin-left: 50px;
}
/* 弹窗样式 */
.modal {
  /*display: none;*/
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.buttons {
  margin-top: 20px;
  text-align: center;
}

.buttons button {
  margin: 5px;
}
.modal_contianer{
  text-align: center;
  align-items: center;
}
.text{
  display: flex;
  margin-left: 200px;
  width: 100%;
  text-align: center;
  align-items: center;
  /* justify-content: flex-end;  将内容向右对齐 */
}
input{
  margin-left: 100px;
}
</style>